<template>
  <div class="forms">
    <el-button type="primary" class="addButton" @click="addButton"
      >添加</el-button
    >
    <el-dialog :title="title" :visible.sync="dialog.isShowDialog" width="50%">
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="上级分类" prop="pid">
          <el-select v-model="ruleForm.pid" placeholder="请选择" clearable>
            <el-option label="无" :value="0"></el-option>
            <el-option
              :label="item.catename"
              :value="item.id"
              v-for="item in cateListData"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分类名称" prop="catename">
          <el-input v-model="ruleForm.catename"></el-input>
        </el-form-item>
        <el-form-item label="图片" prop="img">
          <el-upload
            class="avatar-uploader"
            action="#"
            :auto-upload="false"
            :on-change="onChange"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <el-alert
            title="图片格式(png、jpeg、jpg、gif),大小不能超过2MB"
            type="warning"
            :closable="false"
            show-icon
          >
          </el-alert>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-switch
            :active-value="1"
            :inactive-value="2"
            inactive-color="#ff4949"
            v-model="ruleForm.status"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.isShowDialog = false">取 消</el-button>
        <el-button type="primary" @click="addCategory" v-if="cid == ''"
          >确 定</el-button
        >
        <el-button type="primary" @click="editCategory" v-else>确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getCateAdd, getCateInfo, getCateEdit } from "../../../request/api";
export default {
  props: ["dialog", "cateListData"],
  data() {
    return {
      cid: "",
      title: "",
      // 要上传的图片路径
      imageUrl: "",
      // 添加表单数据
      ruleForm: {
        pid: 0, //上级分类编号
        catename: "", //商品分类名称
        img: "", //图片(文件，一般用于二级分类)
        status: 1, //1状态   1正常2禁用   number类型
      },
    };
  },
  methods: {
    // 点击添加按钮
    addButton() {
      this.cid = "";
      this.title = "添加商品分类";
      this.resetFiled()
      this.dialog.isShowDialog = true;
    },
    resetFiled() {
      this.ruleForm = {
        pid: 0,
        catename: "",
        img: "",
        status: 1,
      };
    },
    // 添加文件、上传成功和上传失败时都会被调用
    onChange(file) {
      let imgType = ["image/png", "image/jpg", "image/jpeg", "image/gif"];
      if (imgType.indexOf(file.raw.type) == -1)
        return this.$message.error("图片格式不满足png/jpg/jpeg/gif格式");
      if (file.raw.size > 2 * 1024 * 1024)
        return this.$message.error("图片大小不能超过2MB");
      this.imageUrl = URL.createObjectURL(file.raw);
      // 将文件信息赋给添加表单的数据
      this.ruleForm.img = file.raw;
    },
    // 添加分类
    addCategory() {
      let isFile = false;
      if (this.ruleForm.img != "") {
        isFile = true;
      }
      getCateAdd(this.ruleForm, isFile).then(
        (res) => {
          if (res.data.code == 200) {
            this.$message.success("添加成功");
            this.dialog.isShowDialog = false;
            this.resetFiled();
            // 刷新数据
            this.$emit("refreshList");
          }
        },
        (err) => err
      );
    },
    // 展示一个商品分类信息
    getOneCategoryData(id) {
      this.title = "编辑商品分类";
      this.cid = id;
      getCateInfo({ id }).then(
        (res) => {
          if (res.data.code == 200) {
            this.ruleForm = res.data.list;
            if (res.data.list.img != "") {
              this.imageUrl = this.baseURL + res.data.list.img;
              this.dialog.isShowDialog = true;
            }
          }
        },
        (err) => err
      );
    },
    // 编辑商品分类信息
    editCategory() {
      let obj = {
        id: this.cid,
        ...this.ruleForm,
      };
      let isFile = false;
      if (this.ruleForm.img != "") {
        isFile = true;
      }
      getCateEdit(obj, isFile).then(
        (res) => {
          if (res.data.code == 200) {
            this.$message.success("编辑成功");
            this.dialog.isShowDialog = false;
            // 刷新数据
            this.$emit("refreshList");
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },
  },
};
</script>

<style scoped>
.addButton {
  margin-bottom: 20px;
}
.avatar-uploader /deep/ .el-upload {
  border: 1px dashed #d9d9d9 !important;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>